<!--suppress ALL -->
<template>
  <div class="page fireHazardDetail-container keyIssuesDetail-page" data-page="keyIssuesDetail" style="z-index: 2;">
    <div class="link-page-nav">
      <a href="#" class="link" @click="$root.backToTab()">
        <i class="iconfont icon-zuo"></i>
      </a>
    </div>
    <div class="link-page-top" style="padding-bottom: 17px;">
      <div class="link-page-list-title">重大问题详情</div>
    </div>
    <div class="go-history-list">
      <a class="link" style="color: #000000;" @click="optionFlow">
        <i class="iconfont icon--" id="noAttention_{{getNewId}}" style="font-size: 23px;"></i>
        <i class="iconfont icon--" id="attention_{{getNewId}}" style="font-size: 23px;display: none;"></i>
      </a>
    </div>
    <div class="page-content pdbottom120">
      <div class="page-item">
        <div class="highDanger-detail-result-img" id="highDanger-detail-result-img_{{getNewId}}">
          <img class="highDanger-item-img" src="" />
        </div>
        <div class="highDanger-detail-result-desc"><span id="highDanger-detail-result-isReset_{{getNewId}}">-</span>
          <span  id="highDanger-detail-result-isDel_{{getNewId}}">-</span></div>
        <div class="highDanger-detail-desc" id="highDanger-detail-desc_{{getNewId}}">-</div>
      </div>
      <div class="page-item">
        <div class="highDanger-tital-info">基础信息</div>
        <div class="highDanger-tital-item">
          <div class="highDanger-tital-left">单位名称</div>
          <div class="highDanger-tital-right" id="keyIssuesDetail_unit_name_{{getNewId}}">-</div>
        </div>
        <div class="highDanger-tital-item">
          <div class="highDanger-tital-left">单位地址</div>
          <div class="highDanger-tital-right" id="keyIssuesDetail_unit_address_{{getNewId}}">-</div>
        </div>
        <div class="highDanger-tital-item">
          <div class="highDanger-tital-left">安全责任人</div>
          <div class="highDanger-tital-right" id="keyIssuesDetail_safePeople_{{getNewId}}"></div>
        </div>
        <div class="highDanger-tital-item">
          <div class="highDanger-tital-left">安全管理人</div>
          <div class="highDanger-tital-right" id="keyIssuesDetail_setPeople_{{getNewId}}"></div>
        </div>
      </div>
      <div class="page-item">
        <div class="highDanger-tital-info" style="float: left;  width: 100%; margin: 10px 0;">时间信息</div>
        <div class="highDanger-tital-item">
          <div class="highDanger-tital-left">发生时间</div>
          <div class="highDanger-tital-right" id="keyIssuesDetail-link-handlerTime_{{getNewId}}">-</div>
        </div>
        <div class="highDanger-tital-item">
          <div class="highDanger-tital-left">持续时间</div>
          <div class="highDanger-tital-right" id="keyIssuesDetail-link-intervalTime_{{getNewId}}">-</div>
        </div>
        <div class="highDanger-tital-item">
          <div class="highDanger-tital-left">复位时间</div>
          <div class="highDanger-tital-right" id="highDanger-detail-resetTime_{{getNewId}}">-</div>
        </div>
      </div>
      <div class="page-item">
        <div class="keyIssuesDetail-type-show" id="sys-distroy_{{getNewId}}">
          <div class="highDanger-tital-info my-icon-tz" id="bind-sys-distroy-fn_{{getNewId}}" style="position:relative;">完好性缺失明细<span
              class="fireDetail-link-forMore">故障详情</span></div>
          <ul id="key-fault-list_{{getNewId}}" class="fireDetail-link-fireList">

          </ul>
          <p id="key-fault-lists_{{getNewId}}">更多信息请到接处警查看</p>
        </div>
        <div class="keyIssuesDetail-type-show" id="key-fcf-alarm_{{getNewId}}">
          <div class="highDanger-tital-info my-icon-tz" id="bind-key-fcf-alarm_{{getNewId}}" style="position:relative;">重要消防设施警情<span
              class="fireDetail-link-forMore">详情</span></div>
        </div>
        <div class="keyIssuesDetail-type-show" id="fire-road-jam_{{getNewId}}">
          <div class="highDanger-tital-info my-icon-tz" id="keylss_openVideo_{{getNewId}}" style="position:relative;">监控视频<span
              class="fireDetail-link-forMore">详情</span></div>
        </div>
        <div class="keyIssuesDetail-type-show" id="day-inspect_{{getNewId}}">
          <div class="highDanger-tital-info my-icon-tz" id="bind-inspect-fn_{{getNewId}}" style="position:relative;">巡检明细<span
              class="fireDetail-link-forMore">详情</span></div>
        </div>
      </div>
      <div class="page-item" id="history-detail_{{getNewId}}">
        <div class="highDanger-tital-info">处理记录</div>
        <div class="highDanger-tital-item">
          <div class="highDanger-tital-left">处理时间</div>
          <div class="highDanger-tital-right" id="keyIssuesDetail-record-handlerTime_{{getNewId}}">-</div>
        </div>
        <div class="highDanger-tital-item">
          <div class="highDanger-tital-left">处理类型</div>
          <div class="highDanger-tital-right" id="keyIssuesDetail-question-type_{{getNewId}}">-</div>
        </div>
        <div class="highDanger-tital-item">
          <div class="highDanger-tital-left">处理人</div>
          <div class="highDanger-tital-right" id="keyIssuesDetail-hand-name_{{getNewId}}">-</div>
        </div>
        <div class="highDanger-tital-item">
          <div class="highDanger-tital-left">备注</div>
          <div class="highDanger-tital-right" id="keyIssuesDetail-hand-des_{{getNewId}}">-</div>
        </div>
        
      </div>
      <div class="page-item" id="keyIssuesDetail-video_{{getNewId}}" style="height:128px;display: none;">
        <div class="highDanger-goto-video-desc">想了解单位消控室是否有人值守？</div>
        <div class="highDanger-goto-video" id="keyIssuesDetail-currentOrg_{{getNewId}}">-</div>
      </div>
      <div class="page-item" id="keyIssuesDetail-quit_{{getNewId}}">
        <div class="rdsp-fix-botttom-deal" style="margin-top:8px;" @click="quitCancel">
          <span>立即处理</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .highDanger-detail-result-img .item-fireHazardList-num{
    padding: 21px 0px;
    width: 100%;
    background-color: #F7F7F7;
    color: #F6C039;
    text-align: center;
  }
  .highDanger-detail-result-img .item-fireHazardList-num div p {
    font-family: PingFangSC-Regular;
    font-weight: 400;
  }
  .highDanger-detail-result-img .item-fireHazardList-num div p:first-child{
    font-size: 60px;
  }
  .highDanger-detail-result-img .item-fireHazardList-num div p:last-child{
    font-size: 12px;
  }
  .not-reset{
    margin-left: 10px;
    padding: 2px 4px;
    background: #F6C039;
    border-radius: 4px;
    color: #fff;
    white-space: nowrap;
  }
  .yes-reset{
    margin-left: 10px;
    padding: 2px 4px;
    background: #397FCF;
    border-radius: 4px;
    color: #fff;
    white-space: nowrap;
  }
</style>
<script>
  return {
    mounted() {
      var self = this;
      self.listId = self.$route.params.id;
      self.type = self.$route.params.type;
    },
    data: function () {
      return {
        listId: null,
        type: null,
        isCollect: 0,
        fcFacilitiesId: 0,
        currentOrganizationId: null,
        getNewId: (new Date()).getTime()
      }
    },
    methods: {
      backToRefresh:function(){
        var self = this;
        self.showCurrantListMes();
      },
      quitCancel: function () {
        var self = this;
        app.router.navigate("/keyIssuesCancel/" + self.listId + "/");
      },
      optionFlow: function () { //关注和取消关注事件
        var self = this;
        if (self.isCollect == 1) { // 取消关注
          app.params.dialog.buttonCancel = "取消";
          app.params.dialog.buttonOk = "确认";
          // app.dialog.confirm('确认取消关注此问题?', '确认', function () {
            //取消关注
            common.loading(1);
            Dao.focusOnOff({
              userAccount: userInfor.accountName,
              type: "3",
              userName: userInfor.accountName,
              concemId: self.$route.params.id
            }, function (data) {
              common.loading(0);
              self.isCollect = 0;
              $("#noAttention_"+self.getNewId).css("color", "#333333");
              $("#attention_"+self.getNewId).hide();
              $("#noAttention_"+self.getNewId).show();
              app.methods.showToastCenter("取消关注成功");
            }, function (e) {
              common.loading(0);
              app.methods.showToastCenter("取消关注失败");
            });
          // });
        } else {
          common.loading(1);
          Dao.addUserConcem({
            userAccount: userInfor.accountName,
            type: "3",
            userName: userInfor.accountName,
            concemId: self.$route.params.id
          }, function (data) {
            common.loading(0);
            self.isCollect = 1;
            $("#attention_"+self.getNewId).css("color", "red");
            $("#noAttention_"+self.getNewId).hide();
            $("#attention_"+self.getNewId).show();
            app.methods.showToastCenter("关注成功");
          }, function (e) {
            common.loading(0);
            app.methods.showToastCenter("关注失败");
          });
        }
      },
      getUnitInfo: function () {
        var self = this;
        Dao.unitInfo({
          organizationId: self.currentOrganizationId
        }, function (data) {
          if (data.contacts && data.contacts.length > 0) {
            for (var i = 0; i < data.contacts.length; i++) {
              //安全责任人
              if (data.contacts[i].role == 9) {
                $("#keyIssuesDetail_safePeople_"+self.getNewId).html(common.transNullundefinedToline(data.contacts[i].name) +
                  " " +
                  `<a href="tel:` + data.contacts[i].phone + `" onclick="window.location='tel:` + data
                  .contacts[i].phone + `'">` + data.contacts[i].phone + `</a>`);
              }
              //安全管理人
              if (data.contacts[i].role == 10) {
                $("#keyIssuesDetail_setPeople_"+self.getNewId).html(common.transNullundefinedToline(data.contacts[i].name) +
                  " " +
                  `<a href="tel:` + data.contacts[i].phone + `" onclick="window.location='tel:` + data
                  .contacts[i].phone + `'">` + data.contacts[i].phone + `</a>`);
              }
            }
          }
          $("#keyIssuesDetail_unit_logo_"+self.getNewId).attr("src", picNo(data.logoUrl));
          $("#keyIssuesDetail_unit_name_"+self.getNewId).html(data.name);
          $("#keyIssuesDetail_unit_address_"+self.getNewId).html(data.address);
        });
      },
      showCurrantListMes: function () {
        var self = this;
        var $ = self.$$;
        //2019/06/24新增接口
        Dao.getImportantQuestionAlertById({
          id: self.listId
        }, function (data) {
          if (data) {
            self.currentOrganizationId = data.organizationId;
            self.isCollect = data.isCollect;
            if (self.isCollect == 1) { // 关注
              $("#noAttention_"+self.getNewId).hide();
              $("#attention_"+self.getNewId).css("color", "red");
              $("#attention_"+self.getNewId).show();
            }
            $("#highDanger-detail-result-img_"+self.getNewId).empty();
            if (data.questionType == 4) {
              $("#highDanger-detail-result-img img_"+self.getNewId).hide();
              $("#highDanger-detail-result-img_"+self.getNewId).html(`
                 <div class="item-fireHazardList-num">
                        <div>
                          <p>`+common.transNullundefinedToline(data.statusCount)+`</p>
                          <p>处故障</p>
                        </div>
                      </div>
                `);
            } else if (data.questionType == 5) {
              $("#highDanger-detail-result-img img_"+self.getNewId).hide();
              $("#highDanger-detail-result-img_"+self.getNewId).html(`
                 <div class="item-fireHazardList-num">
                        <div>
                          <p>`+common.transNullundefinedToline(data.statusCount)+`</p>
                          <p>次连续</p>
                        </div>
                      </div>
                `);
            } else {
              $("#highDanger-detail-result-img_"+self.getNewId).html(`
                   <img src="`+picNo(data.detailPic)+`" class="highDanger-item-img">
                `);
              //$("#highDanger-detail-result-img img").attr("src", picNo(data.detailPic));
            }
            $("#highDanger-detail-desc_"+self.getNewId).html(data.selfDesc);
            //判断是否复位
            if (data.isReset == 1) {
              $("#keyIssuesDetail-quit_"+self.getNewId).hide();
              $("#highDanger-detail-resetTime_"+self.getNewId).html(data.resetTime);
              $("#highDanger-detail-result-isReset_"+self.getNewId).html("已复位");
              if (data.status == 1) {
                $("#highDanger-detail-result-isDel_"+self.getNewId).html("已处理");
              } else {
                $("#highDanger-detail-result-isDel_"+self.getNewId).html("未处理");
                $("#history-detail_"+self.getNewId).hide();
              }
            } else {
              $("#highDanger-detail-resetTime_"+self.getNewId).html("当前未复位");
              $("#highDanger-detail-result-isReset_"+self.getNewId).html("未复位");
              //已处理
              if (data.status == 1) {
                $("#highDanger-detail-result-isDel_"+self.getNewId).html("已处理");
                $("#keyIssuesDetail-quit_"+self.getNewId).hide();
                $("#history-detail_"+self.getNewId).show();
              } else {
                $("#highDanger-detail-result-isDel_"+self.getNewId).html("未处理");
                $("#history-detail_"+self.getNewId).hide();
                //从历史记录点过来
                if (self.type == 1) {
                  $("#keyIssuesDetail-quit_"+self.getNewId).hide();
                } else {
                  $("#keyIssuesDetail-quit_"+self.getNewId).show();
                }
              }
            }
            //重大问题明细
            $("#keyIssuesDetail-question-type_"+self.getNewId).html(data.handlerTypeName);
            $("#keyIssuesDetail-link-handlerTime_"+self.getNewId).html(data.startTime);
            $("#keyIssuesDetail-link-intervalTime_"+self.getNewId).html(data.intervalTime);
            //消防系统完好性缺失
            if (data.questionType == 4) {
              //显示故障明细
              $("#key-question-fireroom_"+self.getNewId).hide(0);
              $("#sys-distroy_"+self.getNewId).show();
              jQuery("#bind-sys-distroy-fn_"+self.getNewId).off().click(function () {
                app.router.navigate("/moreDectorState/2/" + data.organizationId + "/0/2/");
              });
              jQuery("#key-fault-list_"+self.getNewId).empty();
              //获取故障明细
              self.getFaultMes(jQuery("#key-fault-list_"+self.getNewId), data);
              //消控室
              self.getUnitVedio_key(data.organizationId);
            }
            //重要消防设施警情
            else if (data.questionType == 3) {
              $("#key-fcf-alarm_"+self.getNewId).show(0);
              $("#key-question-fireroom_"+self.getNewId).show(0);
              $("#key-fcf-alarm-img_"+self.getNewId).attr("src", picNo(data.detailPic));
              jQuery("#bind-key-fcf-alarm_"+self.getNewId).off().click(function () {
                app.router.navigate("/eqmentMsg/" + data.fcFacilitiesId + "/");
              });
              //消控室
              self.getUnitVedio_key(data.organizationId);
            }
            //消防通道堵塞
            else if (data.questionType == 2) {
              $("#fire-road-jam_"+self.getNewId).show();
              $("#key-question-fireroom_"+self.getNewId).show();
              $("#keyIssuesDetail-vedio-pic_"+self.getNewId).attr("src", picNo(data.detailPic));
              //消控室轮播
              self.getUnitVedio_key(data.organizationId);
              self.getFcfRelateVideos(data.fcFacilitiesId);
            }
            //消控室无人值守
            else if (data.questionType == 1) {
              $("#fire-road-jam_"+self.getNewId).show();
              $("#key-question-fireroom_"+self.getNewId).hide();
              $("#keyIssuesDetail-vedio-pic_"+self.getNewId).attr("src", picNo(data.detailPic));
              self.getFcfRelateVideos(data.fcFacilitiesId);
            }
            //日常巡检持续未完成
            else if (data.questionType == 5) {
              if (userInfor.isMuilUnitUser == 0) {
                $("#day-inspect_"+self.getNewId).show();
              }
              $("#key-question-fireroom_"+self.getNewId).show();
              //消控室轮播
              self.getUnitVedio_key(data.organizationId);
              jQuery("#bind-inspect-fn_"+self.getNewId).off().click(function () {
                // if (jQuery("#keyIssuesDetail-link-handlerTime_"+self.getNewId).html()) {
                //   var date = moment(jQuery("#keyIssuesDetail-link-handlerTime_"+self.getNewId).html());
                //   var month = (date.month() + 1).toString().length > 1 ? date.month() + 1 : "0" + (date
                //   .month() + 1);
                //   var dateDate = date.date().toString().length > 1 ? date.date() : "0" + date.date();
                //   app.router.navigate("/checkApply/2/" + date.year() + "-" + month + "-" + dateDate + "/0/");
                // }
                app.router.navigate("/checkApply/2/0/1/0/");
              });

            }
            //处理记录
            $("#keyIssuesDetail-record-handlerTime_"+self.getNewId).html(data.handlerTime);
            $("#keyIssuesDetail-hand-type_"+self.getNewId).html(data.handlerTypeName);
            $("#keyIssuesDetail-hand-des_"+self.getNewId).html(data.remarks);
            $("#keyIssuesDetail-hand-name_"+self.getNewId).html(data.handlerAccountName);
            self.getUnitInfo();
          }
        });
      },
      //获取故障明细
      getFaultMes: function ($el, data) {
        $el.empty();
        var self = this;
        var endTime = "";
        if (self.type == 1) {
          endTime = data.endTime;
        } else {
          endTime = "";
        }
        let getData
        Dao.getHistoryRecordsByTimeSlot({
          userName: userInfor.accountName,
          deviceId: appKeyObj.deviceId,
          orgId: data.organizationId,
          startTime: data.startTime,
          endTime: endTime,
          fireTType: 20
        }, function (data) {
          if (data && data.length > 0) {
            if(data.length>51){
              getData = data.slice(0,50)
              for (var i = 0; i < getData.length; i++) {
                if(getData[i].isReset == 0){
                  $el.append(`<li class="highDanger-tital-item">
                              <a href="/eqmentMsg/` + getData[i].fcFacilitiesId +
                  `/" class="highDanger-tital-alarm"><div class="item-title my-icon-tz">` +
                  common.transNullundefinedToline(getData[i].selfDesc) + `<span class='not-reset'>未复位</span></div>
                              </a>
                            </li>`);
                }else{
                  $el.append(`<li class="highDanger-tital-item">
                              <a href="/eqmentMsg/` + getData[i].fcFacilitiesId +
                  `/" class="highDanger-tital-alarm"><div class="item-title my-icon-tz">` +
                  common.transNullundefinedToline(getData[i].selfDesc) + `<span class='yes-reset'>已复位</span></div>
                              </a>
                            </li>`);
                }
              }
              
              jQuery("#key-fault-lists_"+self.getNewId).show()
              
            }else{
              for (var i = 0; i < data.length; i++) {
                if(data[i].isReset == 0){
                  $el.append(`<li class="highDanger-tital-item">
                              <a href="/eqmentMsg/` + data[i].fcFacilitiesId +
                  `/" class="highDanger-tital-alarm"><div class="item-title my-icon-tz">` +
                  common.transNullundefinedToline(data[i].selfDesc) + `<span class='not-reset'>未复位</span></div>
                              </a>
                            </li>`);
                }else{
                  $el.append(`<li class="highDanger-tital-item">
                              <a href="/eqmentMsg/` + data[i].fcFacilitiesId +
                  `/" class="highDanger-tital-alarm"><div class="item-title my-icon-tz">` +
                  common.transNullundefinedToline(data[i].selfDesc) + `<span class='yes-reset'>已复位</span></div>
                              </a>
                            </li>`);
                }
                
              }
              jQuery("#key-fault-lists_"+self.getNewId).hide()
            }
            
          }
        });
      },
      getFcfRelateVideos: function (fcFacilitiesId) {
        var self = this;
        Dao.getFcfRelateVideos({
          userName: userInfor.accountName,
          deviceId: appKeyObj.deviceId,
          relateObjType: 1,
          account: userInfor.accountName,
          relateObjId: fcFacilitiesId,
        }, function (data) {
          jQuery("#keylss_openVideo_"+self.getNewId).off().click(function () {
            if (data != null && data.length > 0) {
              videoData[data[0].id] = data[0];
              self.openVideo(data[0].id);
            } else {
              app.methods.showToastCenter("暂无视频信息");
            }
          });
        });
      },
      getUnitVedio_key: function (organizationId) { //消控室视频
        var self = this;
        var $ = self.$$;
        videoData = [];
        Dao.getControlRoomInfo({
          userName: userInfor.accountName,
          orgId: organizationId
        }, function (data) {
          if (data && data.length > 0) {
            $("#keyIssuesDetail-video_"+self.getNewId).show();
            for (var i = 0; i < data.length; i++) {
              videoData[data[i].video.id] = data[i].video;
              //视频的情况
              if (data.length == 1) {
                $("#keyIssuesDetail-currentOrg_"+self.getNewId).html(`
                              <span id="goTo-see-video_`+self.getNewId+`" class="goTo-see-video"  data-id="` + data[0].video.id + `">立即查看消控室视频</span>
                            `);
                $("#goTo-see-video_"+self.getNewId).click(function (event) {
                  var id = jQuery(event.currentTarget).attr("data-id");
                  self.openVideo(id);
                });
              } else {
                $("#keyIssuesDetail-currentOrg_"+self.getNewId).html(`
                              <span id="goTo-see-video_`+self.getNewId+`" class="goTo-see-video"  data-id="` + organizationId + `">立即查看消控室视频</span>
                            `);
                $("#goTo-see-video_"+self.getNewId).click(function (event) {
                  var organizationId = jQuery(event.currentTarget).attr("data-id");
                  app.router.navigate("/cotrolRoomVideo/" + organizationId + "/");
                });
              }

            }
          } else {
            $("#keyIssuesDetail-video_"+self.getNewId).hide();
          }
        }, false);
      },
      reIn: function () {
        var self = this;
        var $ = self.$$;
        self.showCurrantListMes();
      },
      formatFireTime: function (time) {
        if (time) {
          return time.replace("时", "小时").replace("分", "分钟");
        }
      },
      openVideo: function (id) {
        var self = this;
        var bean = videoData[id];
        var videoBean = {};
        videoBean.id = bean.id;
        videoBean.deviceId = bean.deviceId;
        videoBean.type = bean.type;
        videoBean.name = bean.name;
        videoBean.channel = bean.channel;
        videoBean.status = bean.status;
        videoBean.picUrl = bean.picUrl;
        videoBean.isOnline = bean.isOnline;
        videoBean.isConcem = bean.isConcem == null ? 0 : bean.isConcem;
        Dao.getAuthList({
          userName: userInfor.accountName,
          deviceId: appKeyObj.deviceId,
          organizationId: self.currentOrganizationId,
          equiptType: bean.type,
          orgCode: userInfor.org.orgCode,
          authId: bean.authId
        }, function (data) {
          var videoKeyBean = data[0];
          native.openVideo(JSON.stringify(videoKeyBean), JSON.stringify(videoBean));
        });
      },
    },
    on: {
      pageInit: function (e, page) {
        var self = this;
        self.showCurrantListMes();
      },
      // pageAfterIn: function (e, page) {
      //   var self = this;
      //   self.showCurrantListMes();
      // },
    }
  }
</script>